<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>商家管理/商家信息</a-breadcrumb-item>
    </a-breadcrumb>
    <a-row class="pd20 mt20">
      <a-col :span="6">
        商家名称：
        <a-input placeholder="请输入" v-model="queryForm.merchantName" />
      </a-col>
      <a-col :span="6">
        商家状态：
        <a-select
          v-model="queryForm.merchantStatus"
          placeholder="请选择商家状态"
        >
          <a-select-option
            v-for="(item, index) in statusList"
            :key="index"
            :value="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="6">
        商家位置：
        <a-input placeholder="请输入" v-model="queryForm.location" />
      </a-col>
      <a-col :span="6">
        实际经营项目：
        <a-input placeholder="请输入" v-model="queryForm.actualBusinessItems" />
      </a-col>
      <a-col :span="6">
        姓名搜索：
        <a-input
          placeholder="房东、承租人、经营者姓名"
          v-model="queryForm.userName"
        />
      </a-col>
      <a-col :span="6">
        电话搜索：
        <a-input
          placeholder="房东、承租人、经营者电话"
          v-model="queryForm.telephone"
        />
      </a-col>
      <a-col :span="8">
        创建时间范围：
        <a-range-picker
          v-model="dateRange"
          style="width: 200px"
          @change="onChange"
          :placeholder="['开始日期', '结束日期']"
        />
      </a-col>
      <a-col :span="4">
        <a-button type="primary" @click="handleSearch"> 查询 </a-button>&emsp;&nbsp;
        <a-button @click="cleanQuery">重置</a-button>
      </a-col>
    </a-row>
    <a-row class="pd20 mt20">
      <div class="btn_box">
        <div>商家管理</div>
        <a-button
          type="primary"
          @click="addFn"
          v-hasPermi="['zhonghe:lxzz:add']"
          >添加</a-button
        >
      </div>
      <a-spin :spinning="loading">
        <!-- <div class="table-container"> -->
        <a-table
          :columns="columns"
          :data-source="tableData"
          :pagination="false"
          :scroll="{ x: 1500 }"
          :rowKey="record => record.merchantId"
        >
          <template slot="description" slot-scope="text, record">
            <ToolTip :text="text" />
          </template>
          <template slot="road" slot-scope="text, record">
            <ToolTip :text="`${record.community}${record.road}${record.houseNumber}`" />
          </template>
          <template slot="landlordContact" slot-scope="text, record">
            <div class="phone-cell">
              <span>{{
                record.showPhone ? text : $desensitizePhone(text)
              }}</span>
              <a-icon
                :type="record.showPhone ? 'eye-invisible' : 'eye'"
                @click.stop="togglePhoneVisibility1(record)"
              />
            </div>
          </template>
          <template slot="tenantContact" slot-scope="text, record">
            <div class="phone-cell">
              <span>{{
                record.showPhone2 ? text : $desensitizePhone(text)
              }}</span>
              <a-icon
                :type="record.showPhone2 ? 'eye-invisible' : 'eye'"
                @click.stop="togglePhoneVisibility2(record)"
              />
            </div>
          </template>
          <span slot="action" slot-scope="text, record">
            <a @click="view(text, 'view')" v-hasPermi="['zhonghe:lxzz:edit']"
              >查看</a
            >
            <a-divider type="vertical" />
            <a @click="editFn(text, record)" v-hasPermi="['zhonghe:lxzz:edit']"
              >修改</a
            >
            <a-divider type="vertical" v-if="text.extendCode"/>
            <a @click="codeFn(text, record)" v-hasPermi="['zhonghe:lxzz:edit']" v-if="text.extendCode">二维码</a
            >
            <a-divider type="vertical" />
            <a
              @click="delFn(text, record)"
              v-hasPermi="['zhonghe:lxzz:del']"
              class="red"
              >删除</a
            >
          </span>
        </a-table>
        <!-- </div> -->

        <div class="page_box">
          <a-pagination
            v-model="queryForm.offset"
            :page-size-options="['20', '30', '40', '50']"
            :total="total"
            show-size-changer
            :page-size="queryForm.current"
            @showSizeChange="onShowSizeChange"
            @change="pageChange"
            :show-total="(total) => `共 ${total} 条`"
          ></a-pagination>
        </div>
      </a-spin>
    </a-row>
    <a-modal
      title="查看二维码"
      :visible="dialogVisible"
      width="38%"
      ok-text="确认"
      cancel-text="取消"
      @cancel="dialogVisible = false"
      @ok="putDict"
      :footer="null"
    >
      <QRCode
        v-if="url"
        alt=""
        :content="url"
        id="printTest"
        :width="'200'"
        :height="'200'"
      ></QRCode>
    </a-modal>
  </div>
</template>

<script>
import { Modal } from "ant-design-vue";
import { message } from "ant-design-vue";
import dayjs from "dayjs";
import QRCode from "./QRCode.vue";
export default {
  components: {
    QRCode,
  },
  data() {
    return {
      dateRange: [],
      loading: true,
      dialogVisible: false,
      queryForm: { current: 20, offset: 1 },
      total: 0,
      form: this.$form.createForm(this, { name: "coordinated" }),
      id: null,
      tableData: [],
      columns: [
        {
          title: "商家ID",
          dataIndex: "merchantId",
          key: "merchantId",
          width: 120,
        },
        {
          title: "商家名称",
          dataIndex: "merchantName",
          key: "merchantName",
          width: 90,
          scopedSlots: { customRender: "description" },
        },
        {
          title: "商家状态",
          dataIndex: "merchantStatusName",
          key: "merchantStatusName",
          width: 80,
          // fixed: 'left',
        },
        {
          title: "商家位置",
          dataIndex: "road",
          key: "road",
          scopedSlots: { customRender: "road" },
          width: 150,
        },
        {
          title: "实际经营项目",
          dataIndex: "actualBusinessItems",
          key: "actualBusinessItems",
          scopedSlots: { customRender: "description" },
          width: 120,
        },
        {
          title: "房东姓名",
          dataIndex: "landlordName",
          key: "landlordName",
          width: 100,
        },
        {
          title: "房东联系方式",
          dataIndex: "landlordContact",
          key: "landlordContact",
          scopedSlots: { customRender: "landlordContact" },
          width: 150,
        },
        {
          title: "承租人姓名",
          dataIndex: "tenantName",
          key: "tenantName",
          width: 120,
        },
        {
          title: "承租人联系方式",
          dataIndex: "tenantContact",
          key: "tenantContact",
          scopedSlots: { customRender: "tenantContact" },
          width: 150,
        },
        {
          title: "经营者姓名",
          dataIndex: "operatorName",
          key: "operatorName",
          width: 120,
        },
        {
          title: "创建人",
          dataIndex: "createdUserName",
          key: "createdUserName",
          width: 80,
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          key: "createTime",
          width: 200,
        },
        {
          title: "操作",
          key: "action",
          width: 200,
          scopedSlots: { customRender: "action" },
          fixed: "right",
        },
      ],
      formItemLayout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 19 },
      },
      formTailLayout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 19, offset: 4 },
      },
      typeList: [
        {
          value: "1",
          label: "非公有经济组织",
        },
        {
          value: "2",
          label: "公有经济组织",
        },
      ],
      statusList: [
        {
          value: 0,
          label: "歇业",
        },
        {
          value: 1,
          label: "营业",
        },
        {
          value: 2,
          label: "装修",
        },
      ],
      url: "",
    };
  },
  async mounted() {
    await this.getList();
    const totalWidth = this.columns.reduce(
      (sum, col) => sum + (col.width || 0),
      0
    );
    console.log("列宽总和:", totalWidth, "scroll.x:", 1300);
  },
  methods: {
    handleSearch(){
      this.queryForm.offset = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      const url = "government-platform-center/xunjian/merchantInfo/queryByPage";
      const data = this.queryForm;
      this.$axios.post(url, data).then((res) => {
        if (res.data.code == 0) {
          this.tableData = res.data.data.map((item) => {
            item["showPhone"] = false;
            item["showPhone2"] = false;
            this.statusList.forEach((i) => {
              if (i.value == item.merchantStatus) {
                item["merchantStatusName"] = i.label;
              }
            });
            this.typeList.forEach((i) => {
              if (i.value == item.twoNewOrganizationType) {
                item["typeName"] = i.label;
              }
            });
            return item;
          });
          this.total = res.data.total;
          this.loading = false;
        }
      });
    },
    cleanQuery() {
      this.queryForm = { current: 20, offset: 1 };
      this.dateRange = [];
      this.getList();
    },
    // 分页
    onShowSizeChange(current, pageSize) {
      this.queryForm.current = pageSize;
      this.queryForm.offset = 1;
      this.getList();
    },
    pageChange(current) {
      this.queryForm.offset = current;
      this.getList();
    },
    delFn(text, record) {
      const that = this;
      Modal.confirm({
        title: "确认删除",
        content: "您确定要删除这项内容吗？",
        okText: "确认",
        cancelText: "取消",
        onOk() {
          const url = `/government-platform-center/xunjian/merchantInfo/delete?merchantId=${text.merchantId}`;
          that.$axios.delete(url).then((res) => {
            if (res.data.code == 0) {
              that.getList();
              message.success("删除成功");
            }
          });
        },
        onCancel() {
          // 在此处理取消逻辑
          console.log("删除已取消");
        },
      });
    },
    goData(text, record) {
      this.$router.push({
        path: "/dataDict",
        query: { dictType: text.dictType, id: text.id },
      });
    },
    addFn() {
      this.$router.push({ path: "/xuncha/sjgl/add" });
    },
    editFn(text, record) {
      this.$router.push({
        path: "/xuncha/sjgl/add",
        query: {
          type: "edit",
          merchantId: text.merchantId,
        },
      });
    },
    view(text, record) {
      this.$router.push({
        path: "/xuncha/sjgl/add",
        query: {
          type: "view",
          merchantId: text.merchantId,
        },
      });
    },
    codeFn(text, record) {
      this.url = text.extendCode;
      this.dialogVisible = true;
    },
    putDict() {
      this.dialogVisible = false;
      // this.form.validateFields((err, values) => {
      //   if (err) {
      //     return;
      //   }
      //   if (!this.id) {
      //     const form = values;
      //     form.registerTime = dayjs(form.registerTime).format("YYYY-MM-DD");
      //     form.pushTime = dayjs(form.pushTime).format("YYYY-MM-DD");
      //     const url = "/government-platform-center/twoNewOrganization";
      //     this.$axios
      //       .post(url, form, {
      //         headers: {
      //           "Content-Type": "application/x-www-form-urlencoded",
      //         },
      //       })
      //       .then((res) => {
      //         if (res.data.code == 0) {
      //           this.getList();
      //           this.reSetForm();
      //           this.dialogVisible = false;
      //           message.success("操作成功");
      //         }
      //       });
      //   } else {
      //     const form = { ...values, id: this.id };
      //     form.registerTime = dayjs(form.registerTime).format("YYYY-MM-DD");
      //     form.pushTime = dayjs(form.pushTime).format("YYYY-MM-DD");
      //     const url = "/government-platform-center/twoNewOrganization/edit";
      //     this.$axios
      //       .post(url, form, {
      //         headers: {
      //           "Content-Type": "application/x-www-form-urlencoded",
      //         },
      //       })
      //       .then((res) => {
      //         if (res.data.code == 0) {
      //           this.getList();
      //           this.reSetForm();
      //           this.dialogVisible = false;
      //           message.success("操作成功");
      //         }
      //       });
      //   }
      // });
    },
    reSetForm() {
      // this.form = { dictName: null, dictType: null, remark: null }
    },
    onChange() {
      this.queryForm.startTime = dayjs(this.dateRange[0]["_d"]).format(
        "YYYY-MM-DD"
      );
      this.queryForm.endTime = dayjs(this.dateRange[1]["_d"]).format(
        "YYYY-MM-DD"
      );
    },
    togglePhoneVisibility1(record) {
      this.$set(record, "showPhone", !record.showPhone);
    },
    togglePhoneVisibility2(record) {
      this.$set(record, "showPhone2", !record.showPhone2);
    },
  },
};
</script>

<style lang="scss" scoped>
.ant-row {
  border-radius: 5px;

  background: #fff;
  color: #000;
}

v-deep {
  .ant-table-thead > tr > th {
    color: #000;
    font-weight: bold;
  }
  .ant-table-tbody > tr > td {
    color: #000;
  }
  .el-table thead {
    color: black;
    font-weight: bold;
    background: #fafafa;
  }
  .el-table th.el-table__cell {
    background: #fafafa;
  }
}
::v-deep .ant-table-thead > tr > th {
  color: #000;
  font-weight: bold !important;
}
.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}

@media screen and (max-width: 1300px) {
  .el-input {
    width: 70%;
  }

  .el-select {
    width: 70%;
  }

  .app {
    width: calc(100% - 50px);
  }
}

@media screen and (max-width: 1100px) {
  .el-input {
    width: 90%;
  }

  .el-select {
    width: 90%;
  }
}

.table {
  width: 100%;
  overflow-x: auto !important;
}

/* 添加表格原生滚动条样式 */
::v-deep .ant-table-body {
  overflow-x: auto !important;
  /* overflow-y: auto !important; */
  /* max-height: 500px; 设置最大高度，超出时显示垂直滚动条 */
}

/* 确保使用原生滚动条样式 */
::v-deep .ant-table-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::v-deep .ant-table-body::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 4px;
}

::v-deep .ant-table-body::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* 修复固定列的问题 */
::v-deep .ant-table-fixed-right {
  right: 0px; /* 为滚动条留出空间 */
}
</style>
